(function() {

    var nodes = [{
        id: '000',
        text: '未来公司',
        img: 'icon-folder',
        nodes: [{
            id: 1,
            text: 'Google',
            img: 'icon-page'
        }, {
            id: 2,
            text: 'Baidu',
            img: 'icon-page'
        }, {
            id: 3,
            text: 'Microsoft',
            img: 'icon-page'
        }]
    }];



    $().w2field('addType', 'etree', function(options) {

        var obj = this;
        var sider_name

        // sidebar show

            function _show(event) {
                // initialize tree (sidebar).
                w2ui['_sidebar'] && w2ui['_sidebar'].destroy();
                var $sider = $().w2sidebar({
                    name: '_sidebar',
                    nodes: options['nodes'] || []
                });

                $sider.select(options['selected']);
                $sider.expandParents(options['selected']);
                // node selected
                $sider.on('click', _change);

                $(this).w2overlay({
                    html: '<div id="etree_container" style="padding: 10px; width:200px; height: 150px;">' + '    Multi line HTML message<br>Multi line HTML message<br>Multi line HTML message<br>' + '</div>'
                });
                $sider.render($('#etree_container'));
            }

            // set value

            function _change(event) {
                var node = event.node;
                if (event.target != '000') {
                    $(obj.el).val(node.id).change();
                    options['selected'] = node.id;
                    // it's grid
                    if (options['items']) return;
                    // form field
                    var new_val = node.text || selected;
                    $(obj.el).val(new_val);
                    if (event.stopPropagation) event.stopPropagation();
                    else event.cancelBubble = true;
                    return false;
                }
            }

        $(this.el).on('click', _show).on('focus', _show).on('keypress', function(event) {
            if (event.stopPropagation) event.stopPropagation();
            else event.cancelBubble = true;
            return false;
        });

        // attach events
        this.tmp = {
            onChange: function(event) {
                obj.change.call(obj, event)
            }
        };


        $(this.el)
            .addClass('w2field')
            .data('w2field', this)
            .on('change', obj.tmp.onChange)
            .css({
                'box-sizing': 'border-box',
                '-webkit-box-sizing': 'border-box',
                '-moz-box-sizing': 'border-box',
                '-ms-box-sizing': 'border-box',
                '-o-box-sizing': 'border-box'
            });
        // format initial value
        this.change($.Event('change'));
        // form field initialized..
        if (!options['items']) {
            (function(event) {
                var selected = options['selected'];
                var new_val = (typeof options['init'] == 'function') ? options['init'](selected) : function(selected) {
                        return function(nodes) {
                            for (var i in nodes) {
                                if (selected == nodes[i]['id']) return nodes[i].text;
                                if (nodes[i]['nodes'] && nodes[i]['nodes'].length) {
                                    return arguments.callee(nodes[i]['nodes']);
                                }
                            };
                            return selected;
                        }(options['nodes']);
                    }(selected);

                $(obj.el).val(new_val);
                if (event.stopPropagation) event.stopPropagation();
                else event.cancelBubble = true;
                return false;
            })($.Event('click'));
        }
    });
})();